<template>
  <div class="explore">
    <div class="container" v-for="explore in explores" :key="explore">
      <explore-card class="explore-card" v-bind:explore-info="{avatar:explore.user.avatar, time:explore.created_at,
         nickname:explore.user.nickname, content:explore.content, id:explore.id,userId:explore.user.id}" >
      </explore-card>
    </div>
  </div>
</template>

<script>
import ExploreCard from '@/components/ExploreCard'

export default {
  name: 'Explore',
  components: {
    ExploreCard
  },
  data () {
    return {
      explores: []
    }
  },
  methods: {
    load () {
      this.explores = [{ user: { nickname: 'zz奶茶君' }, created_at: 1355325222, content: '新发布一篇文章：“XXXXXX6”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255324522, content: '新发布一篇文章：“XXXXXX5”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255315222, content: '新发布一篇文章：“XXXXXX4”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255314222, content: '新发布一篇文章：“XXXXXX3”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255324222, content: '新发布一篇文章：“XXXXXX2”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255315222, content: '新发布一篇文章：“XXXXXX1”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255315222, content: '新发布一篇文章：“XXXXXXX”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255315222, content: '新发布一篇文章：“XXXXXXX”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255315222, content: '新发布一篇文章：“XXXXXXX”' },
        { user: { nickname: 'zz奶茶君' }, created_at: 1255315222, content: '新发布一篇文章：“XXXXXXX”' }
      ]
    }
  },
  beforeMount () {
    this.load()
  }
}
</script>

<style scoped>
  .explore {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .container {
    width: 60%;
  }
  .explore-card {
    padding: 1rem;
    margin: 0.7rem 0;
    background: #f1f5ff;
    border-radius: 2rem;
    box-shadow: 0.5rem 0.5rem  1rem rgba(0, 0, 33, 0.1),-0.5rem -0.5rem 1rem rgba(255, 255, 255, 1);
  }
</style>
